// 周边配套
<template>
  <div id="SupportDetailsList">
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="SupportDetailsList_wrap">
      <div class="SupportDetailsList_wrap_tabs">
        <div>
          <div id="tabNameAll">
            <div class="SupportDetailsList_comment">
              <h3>我要点评 - {{HouseDetail.name}}</h3>
              <div class="SupportDetailsList_comment_wydp">
                <div class="wydp-center_kanfang">
                  <span>是否去售楼处看过房：</span>
                  <div>
                    <el-radio-group v-model="radio1">
                      <el-radio-button label="考虑看房"></el-radio-button>
                      <el-radio-button label="已看过房"></el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <div class="wydp-center_evaluate" v-if="radio1=='已看过房'">
                  楼盘评价：
                  <el-rate v-model="value1"></el-rate>
                </div>
              </div>
              <div class="SupportDetailsList_comment_textarea">
                <div>
                  <p>点 评 :</p>
                  <p style="color:red;">(必填)</p>
                </div>
                <div>
                  <el-input
                    type="textarea"
                    :rows="7"
                    maxlength="500"
                    minlength="15"
                    placeholder="嗨!朋友，说点什么吧，分享您看房中的点点滴滴，您可从楼盘价格，周边配套，小区环境，交通地段等角度进行点评哦!(15-500字)嗨！朋友，说点什么吧，分享您看房中的点点滴滴，您可从楼盘价格，周边配套，小区环境，交通地段等角度进行点评哦！(15-500字)"
                    v-model="textarea"
                    show-word-limit
                  ></el-input>
                  <p>最少15字</p>
                </div>
              </div>
              <div class="SupportDetailsList_comment_submit">
                <el-button type="primary" @click="submit" plain>立即点评</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 关键区域，街道，周边 -->
      <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
    </div>
    <Footer :currentCity="currentCity"></Footer>
  </div>
</template>

<script>
var head = {
  title: '成都✖✖✖✖✖✖✖✖✖✖', // 网页包头
  content: '成都✖✖✖✖✖✖✖✖✖✖', // 网页描述
  keywords: '成都,买房,管家,楼盘,买房网,✖✖✖✖✖✖✖✖✖✖', // 网页关键词
}
import axios from 'axios'
import u from '~/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [
        {
          rel: 'stylesheet',
          href: `/css/lpgk.css?v=${new Date().getTime()}`,
        },
      ],
    }
  },
  data() {
    return {
      textarea: '',
      value1: 0,
      radio1: '考虑看房',
    }
  },
  validate(ctx) {
    return /(.*?)\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl //域名
    var currentCity = ctx.currentCity //城市定位
    var cityList = ctx.cityList //
    var crumbListData = [] //栏目信息
    var estateId = ctx.params.id ? ctx.params.id.split('.')[0] : '' //楼盘ID
    var pageNum = 1 //问答（页）
    var pageSize = 10 //问答（条）
    var problemList = [] //问答列表

    var HouseDetail = [] //楼盘详情数据
    var tagList = []
    var labCode = ctx.query.aliases || ''
    var empty = false
    var loading = {
      show: false,
      text: '加载数据',
    }
    // 获取楼盘详情
    var getMetro = await u.http({
      url: '/pc/houseDetail/queryHouseInfoDetailById',
      params: {
        estateId: estateId, //楼盘ID
      },
    })
    if (getMetro.code == 200) {
      HouseDetail = getMetro.data.houseInfoDetail
      head.title = `${HouseDetail.name},楼盘户型，周边配套，交通地图，${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
      head.content = `✖✖✖✖✖✖✖✖✖✖为您提供${currentCity.cityName}${HouseDetail.name}问答,${HouseDetail.name}所有问答大全,要看详细,清晰的${HouseDetail.name}问答就上✖✖✖✖✖✖✖✖✖✖`
      head.keywords = `${HouseDetail.name}楼盘问答`

      // ==========楼盘面包屑============
      var regionCode = {
        title: `${HouseDetail.regionName}楼盘`,
        href: prefixUrl + `/lpcx/${HouseDetail.regionAliases}`,
      }
      // 202112071655 sry 合并路径
      var regionA = [HouseDetail.regionAliases]
      var streetA = [HouseDetail.streetAliases]
      var nowCrumbHref = u.emptyArrayIsNull(regionA.concat(streetA))
      if (HouseDetail.streetName && HouseDetail.streetAliases) {
        var streetCode = {
          title: `${HouseDetail.streetName}楼盘`,
          href: prefixUrl + `/lpcx/${nowCrumbHref.join('-')}`,
        }
      } else {
        var streetCode = null
      }

      var houseCode = {
        title: `${HouseDetail.name}`,
        href: prefixUrl + `/lpxq/${estateId}.html`,
      }

      // 修改栏目信息
      crumbListData = [
        {
          title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
          href: prefixUrl,
        },
      ]

      if (streetCode) {
        crumbListData.push(regionCode, streetCode, houseCode)
      } else {
        crumbListData.push(regionCode, houseCode)
      }
      // ==========楼盘面包屑============
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }

    // 202112281642 ary 楼盘点评
    var problem = await u.http({
      url: '/app/houseInfoDP/queryHouseDPList',
      params: {
        estateId: estateId, //楼盘ID
        pageNum,
        pageSize,
        labs: String(labCode),
      },
    })
    if (problem.code == 200) {
      problemList = problem.data.list
      if (problemList.length == 0) {
        empty = true
        loading.show = false
      }
      problemList.forEach((item) => {
        item.moreText = '全文'
        if (item.content.length >= 45) {
          item.moreShow = true
        } else {
          item.moreShow = false
        }
        if (item.urls) {
          item.urlsImg = item.urls.split(',')
        }
        var date = new Date(item.createdTime)
        var YY = date.getFullYear() + '-'
        var MM =
          (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-'
        var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hh =
          (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        var mm =
          (date.getMinutes() < 10
            ? '0' + date.getMinutes()
            : date.getMinutes()) + ':'
        var ss =
          date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return (item.datetime = YY + MM + DD + ' ' + hh + mm + ss)
      })
      var total = problem.data.total
    } else {
      loading.show = false
      empty = true
    }

    var tag = await u.http({
      url: '/app/houseInfoDP/countHouseInfoDPNum',
      params: {
        estateId: estateId, //楼盘ID
      },
    })
    if (tag.code == 200) {
      tagList = tag.data
    }

    return {
      prefixUrl,
      currentCity,
      cityList,
      crumbListData,
      estateId,
      HouseDetail,
      problemList,
      pageSize,
      pageNum,
      tagList,
      labCode,
      total,
      regionList: ctx.regionList
    }
  },
  mounted() {},
  methods: {
    submit() {
      if (!localStorage.getItem('userInfo')) {
        document.querySelector('#login').click()
        return false
      } else {
        this.commentSubmit()
      }
    },
    commentSubmit() {
      if (this.textarea.length < 15) {
        this.$message({
          showClose: true,
          message: '请输入评价内容（至少15个字）',
          type: 'error',
        })
      } else {
        u.http({
          client: true,
          url: '/app/houseInfoDP/addHouseInfoDP',
          headers: {
            token: localStorage.getItem('token') || '',
          },
          params: {
            estateId: this.estateId, //楼盘ID
            seeStatus: this.radio1, //是否去售楼处看过房：考虑看房或者已看过房
            xjNum: this.value1, //星级：如果seeStatus=“已看过房”则必填
            content: this.textarea, //评价内容（至少15个字）
            // mediaType: 1, //媒体类型：1代表图片2代表视频
            // mediaUrls: this.commentList.toString(), //媒体链接（说明如果是多张图片则使用英文逗号分开）
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            })
            location.href = this.prefixUrl + `/lpxqdp/${this.estateId}.html`
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'error',
            })
          }
        })
      }
    },
  },
}
</script>